<template>
  <div class="decorateRight" v-if="control">
    <div class="head">
      <i :class="control.icon"></i>
      <span>{{ control.title }}</span>
    </div>
    <div class="body scrollbar">
      <component
        v-bind:is="control.ename"
        :controlData="control"
        :controlsIndex="controlsIndex"
      ></component>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "decorateRight",
  data() {
    return {
      controlsIndex: 0,
      control: null,
    };
  },
  props: [],
  //动态注册组件
  components: {
    announcementComponent:()=>import("./components/announcementComponent"),
    auxiliaryBlankComponent:()=>import("./components/auxiliaryBlankComponent"),
    auxiliaryLineComponent:()=>import("./components/auxiliaryLineComponent"),
    backTopComponent:()=>import("./components/backTopComponent"),
    buttonGroupComponent:()=>import("./components/buttonGroupComponent"),
    carouselImageComponent:()=>import("./components/carouselImageComponent"),
    floatButtonComponent:()=>import("./components/floatButtonComponent"),
    imageListComponent:()=>import("./components/imageListComponent"),
    listNavigationComponent:()=>import("./components/listNavigationComponent"),
    memberComponent:()=>import("./components/memberComponent"),
    pageTopComponent:()=>import("./components/pageTopComponent"),
    projectComponent:()=>import("./components/projectComponent"),
    richTextComponent:()=>import("./components/richTextComponent"),
    titleComponent:()=>import("./components/titleComponent"),
    commissionTemplateHeadComponent:()=>import("./components/commissionTemplateHeadComponent"),
    commissionTemplateListComponent:()=>import("./components/commissionTemplateListComponent"),
    dataDetailsComponent:()=>import("./components/dataDetailsComponent"),
    myTeamHeadComponent:()=>import("./components/myTeamHeadComponent"),
    myTeamListComponent:()=>import("./components/myTeamListComponent"),
    codeManageHeadComponent:()=>import("./components/codeManageHeadComponent"),
    codeManageListComponent:()=>import("./components/codeManageListComponent"),
    billPageHeadComponent:()=>import("./components/billPageHeadComponent"),
    billPageListComponent:()=>import("./components/billPageListComponent"),
    invitationPageComponent:()=>import("./components/invitationPageComponent"),
    dataPageHeadComponent:()=>import("./components/dataPageHeadComponent"),
    dataPageListComponent:()=>import("./components/dataPageListComponent"),
    promoteBusinessListComponent:()=>import("./components/promoteBusinessListComponent"),
    promoteBusinessBottomComponent:()=>import("./components/promoteBusinessBottomComponent"),
  },
  created() {},
  mounted() {
    Bus.$off(`updateRight`);
    Bus.$on(`updateRight`, (data) => {
      // console.log("Right组件被通知更新", data);
      if (data && data.index >= 0) {
        this.controlsIndex = data.index;
        this.$nextTick(() => { 
          this.init();
        });
      } else {
        this.init();
      }
    });
  },
  methods: {
    init() {
      //console.log("right init");
      this.control = null;
      this.$nextTick(() => {
        if (this.decorate.controls[this.controlsIndex]) {
          this.control = this.decorate.controls[this.controlsIndex];
        }
      });
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>

<style scoped lang="scss">
.decorateRight {
  height: 100%;
  width: 500px;
  .head {
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #e8eaec;
    box-sizing: border-box;
    padding-left: 15px;
    display: flex;
    align-items: center;
    i {
      opacity: 0.8;
      font-size: 18px;
      margin-right: 5px;
      color: #5d60f6;
    }
    span {
      font-size: 16px;
    }
  }
  .body {
    width: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 10px;
    .catalog {
      width: 100%;
      padding: 10px 15px 10px 0px;
      box-sizing: border-box;
    }
  }
}
</style>


